<template>
  <div class="navbar">
    <!-- 头布局 -->
    <div class="head-view">
      <!-- 账套选择 -->
      <li class="li-option">
        <el-select
          ref="guide2"
          v-model="currentAccount"
          @change="selectAccount"
          placeholder="请选择"
          size="large"
          class="account-name"
        >
          <el-option
            v-for="item in optionsAccount"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
          ></el-option>
        </el-select>
      </li>
      <!-- 购买 -->
      <div v-if="isLeader == 1" class="btn-buy" @click="clickBuy">
        <!-- <span class="buy-text">{{ $t(`message.navbar.buy`) }}</span> -->
        <span class="buy-text">{{ buyTitle }}</span>
      </div>
      <!-- 新手导航 {{$t(`message.navbar.navigation`)}}-->
      <!-- <el-popconfirm
        confirm-button-text="下一步"
        cancel-button-text="跳过"
        hide-icon
        title="hello，欢迎使用"象过河云进销存系统"，开始我们的体验之旅吧！"
      >-->
      <div slot="reference" ref="guideItem" class="novice-navigation first" @click="clickNavigation">
        <span class="navigation-text">{{ $t(`message.navbar.navigation`) }}</span>
      </div>
      <!-- </el-popconfirm> -->

      <!-- 一键生成商城 {{$t(`message.navbar.navigation`)}}-->
      <div v-if="showGenerateMall" class="novice-navigation second" @click="clickGenerationMall">
        <span class="navigation-text">{{ $t(`message.navbar.generageMall`) }}</span>
      </div>
      <!-- 中间间隔 -->
      <div style="flex: 1"></div>
      <!-- 分享 -->
      <!--      <div class="share" @click="clickShare" ref="guide3">-->
      <!--        <img :src="require('@/assets/navbar/share.png')" alt="分享" />-->
      <!--      </div>-->
      <!-- 桌面快捷方式 -->
      <div class="share" style="cursor: pointer" @click="clickGenerateShortcut" ref="guide4">
        <img :src="require('@/assets/navbar/kjfs.png')" alt="桌面快捷方式" />
      </div>
      <!-- APP下载 -->
      <div class="appDownload">
        <el-popover placement="bottom" trigger="click" v-model="showAppDownload">
          <div class="qrcode-container">
            <!-- <div class="qrcode-item">
              <img src="@/assets/navbar/android-qr.png" alt="安卓下载" />
              <p>安卓下载</p>
            </div>
            <div class="qrcode-item">
              <img src="@/assets/navbar/ios-qr.png" alt="iOS下载" />
              <p>iOS下载</p>
            </div> -->
            <img
              style="height: 333px"
              src="https://www.xiangguohe.cn/template/default/images/home/010259DF-3989-4901-9827-AA03896B13F1.png"
              alt=""
            />
          </div>
          <span slot="reference" class="contact-text">{{ $t(`message.navbar.appDownload`) }}</span>
        </el-popover>
      </div>
      <!-- 联系我们 -->
      <div class="contact-us" style="cursor: pointer" @click="clickContactUs">
        <span class="contact-text">{{ $t(`message.navbar.contactUs`) }}</span>
      </div>
      <!-- 在线客服 -->
      <!--      <div class="contact-us" @click="clickOnlineService">-->
      <!--        <span class="contact-text">{{ $t(`message.navbar.onlineService`) }}</span>-->
      <!--      </div>-->
      <!-- 帮助中心 -->
      <!--      <div class="contact-us" @click="clickHelpCenter">-->
      <!--        <span class="contact-text">{{ $t(`message.navbar.helpCenter`) }}</span>-->
      <!--      </div>-->
      <!-- 选择语言 -->
      <!-- <li class="li-option">
        <el-select v-model="currentLan" @change="selectLanguage" placeholder="中文" size="mini" class="inputStyle">
          <el-option v-for="item in optionsLan" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </li>-->
      <!-- 消息 -->
      <!-- <div class="message" style @click="showMessage">
        <img :src="require('@/assets/navbar/message.png')" alt="消息" />
        <div v-if="hasNewMessage" class="redpot"></div>
      </div>-->
      <s-header-notice style="cursor: pointer" />
      <!-- 头像 -->
      <div class="share" style="margin-left: 20px" @click="accountOption">
        <img :src="userInfo.avatar" alt="头像" style="width: 34px; height: 34px" />
      </div>
      <!-- 用户名 -->
      <!-- <div class="userinfo" @click="showUserInfo" >
        <span>{{ userInfo.userName }}</span>
        <img :src="require('@/assets/navbar/arrow-down.png')" alt="" />
      </div>-->
      <el-dropdown class="avatar-container" trigger="click">
        <div class="userinfo" style="cursor: pointer" @click="showUserInfo">
          <span>{{ userInfo.userName }}</span>
          <img :src="require('@/assets/navbar/arrow-down.png')" alt />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item @click.native="toHome">首页</el-dropdown-item>
          <el-dropdown-item divided @click.native="changePwd">
            <span style="display: block">修改密码</span>
          </el-dropdown-item>
          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>-->
          <el-dropdown-item divided @click.native="logout">
            <span style="display: block">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <hamburger :is-active="true" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />

    <div v-show="false" class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item @click.native="toHome">首页</el-dropdown-item>
          <el-dropdown-item divided @click.native="changePwd">
            <span style="display: block">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="systemSetting">
            <span style="display: block">系统设置</span>
          </el-dropdown-item>
          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>-->
          <el-dropdown-item divided @click.native="logout">
            <span style="display: block">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- 邀请分享弹框 -->
    <DialogInvitation ref="invitationRef"></DialogInvitation>
    <!-- 创建桌面快捷方式弹框 -->
    <DialogShortcut ref="shortcutRef" @onConfirm="shortcutConfirm"></DialogShortcut>
    <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
    <PopupChangePwd ref="changePwd"></PopupChangePwd>
    <DialogConfigSuccess ref="configSuccess"></DialogConfigSuccess>
    <DialogRenewalFee ref="renewalFee"></DialogRenewalFee>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import PopupChangePwd from '@/views/components/popupChangePwd.vue'
import DialogInvitation from '@/components/c_InviteToShare/index'
// import DialogInvitation from '../../views/components/dialogInvitation'
import DialogShortcut from '@/components/c_shortcut/index'
import { setToken } from '@/utils/auth'
import SettingDrawer from '@/components/setting/SettingDrawer'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import { postAction } from '../../api/manage'
import SHeaderNotice from './SHeaderNotice.vue'
import store from '../../store'
import { getTimeYMD } from '@/utils/DateFormatter'
import DialogConfigSuccess from '@/components/c_shop/dialogConfigSuccess'
import DialogRenewalFee from '@/components/c_shop/dialogRenewalFee'

export default {
  inject: ['routeReload', 'closeAll'],
  data() {
    return {
      // 选择语言
      optionsLan: [
        {
          value: '1',
          label: '中文',
        },
        {
          value: '2',
          label: 'English',
        },
        {
          value: '3',
          label: '繁体',
        },
      ],
      optionsAccount: [],
      currentLan: '1',
      langcn: 'cn',
      langen: 'en',
      langtw: 'tw',
      currentAccount: '',
      hasNewMessage: true,
      userInfo: {
        userName: '超级用户',
        avatar: require('@/assets/navbar/avatar.png'),
      },
      user: {},
      isLeader: null,
      openAccountValue: -1,
      buyTitle: '购买',
      showAppDownload: false,
      showGenerateMall: false, // 是否显示一键生成商城
    }
  },
  components: {
    Breadcrumb,
    Hamburger,
    DialogInvitation,
    DialogShortcut,
    SettingDrawer,
    SHeaderNotice,
    PopupChangePwd,
    DialogConfigSuccess,
    DialogRenewalFee,
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar']),
  },
  mounted() {        
    this.user = Vue.ls.get(USER_INFO)
    this.userInfo.userName = this.user.realname
    this.userInfo.avatar = this.user.avatar ? this.user.avatar : this.userInfo.avatar
    // console.log(this.$i18n.locale, '1111')
    switch (this.$i18n.locale) {
      case 'cn':
        this.currentLan = '1'
        break
      case 'en':
        this.currentLan = '2'
        break
      case 'tw':
        this.currentLan = '3'
        break

      default:
        break
    }
    // 监听接收消息
    const that = this
    this.$EventBus.$on('ISCHANGE', function (res) {
      // console.log('navbar---', res)
      that.currentAccount = res.id
      that.getIsLeader()
      that.getSystemInfo(res.id)
    })
    this.$EventBus.$on('changeBook', function (res) {
      // console.log('changeBook')
      that.getAccountList()
      that.getIsLeader()
    })
    this.$EventBus.$on('changeUserInfo', function (res) {
      that.user = Vue.ls.get(USER_INFO)
      that.userInfo.userName = that.user.realname
      that.userInfo.avatar = that.user.avatar ? that.user.avatar : that.userInfo.avatar
    })
    this.$EventBus.$on('getGuideItem', function (res) {
      if (res == 2) {
        let rect = that.$refs.guide2.$el.getBoundingClientRect()
        let params = {
          rect,
          step: 2,
          bookName: '郑州象过河',
        }
        this.$EventBus.$emit('showNoviceGuide', params)
      } else if (res == 3) {
        //第三步被隐藏，直接执行第四步
        //   let rect = that.$refs.guide3.getBoundingClientRect()
        //   let params = {
        //     rect,
        //     step: 3,
        //   }
        //   this.$EventBus.$emit('showNoviceGuide', params)
        // } else if (res == 4) {
        let rect = that.$refs.guide4.getBoundingClientRect()
        let params = {
          rect,
          step: 4,
        }
        this.$EventBus.$emit('showNoviceGuide', params)
      }
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('ISCHANGE')
    this.$EventBus.$off('changeBook')
    this.$EventBus.$off('getGuideItem')
    this.$EventBus.$off('changeUserInfo')
  },
  created() {
    this.openAccountValue = this.$store.getters.openAccountValue
    let accountInfo = Vue.ls.get(ACCOUNT_BOOK) || {}
    if (!accountInfo || !accountInfo.id) {
      // setToken('')
      this.$router.push(`/user/Login`).catch((err) => {})
      this.logout()
      return
    }
    // console.log(this.$i18n.locale, '22222')
    this.getCurrentAccount()
    this.getAccountList()
    // 获取用户权限
    this.getUserPerms()
  },
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccountValue = val
    },
  },
  methods: {
    // 获取是否是leader
    getIsLeader() {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/accountbookusing/xghAccountBookUserUsing/getUserIsLeader', {
        xghAccountBookId: this.currentAccount,
        userId: userInfo.id,
      }).then((res) => {
        this.isLeader = res.result
      })
    },
    // 获取账套列表
    getAccountList() {
      const that = this
      let userInfo = Vue.ls.get(USER_INFO)
      let accountInfo = Vue.ls.get(ACCOUNT_BOOK) || {}
      // console.log('当前账套信息', accountInfo)
      getAction(`accountbookinfo/xghAccountBook/getAccountBookByUserId/${userInfo.id}`).then((res) => {
        if (res.code == 200) {
          that.optionsAccount = res.result
          if (that.optionsAccount.length > 0) {
            that.currentAccount = that.optionsAccount[0].id
            that.optionsAccount.forEach((item) => {
              if (accountInfo.id && item.id == accountInfo.id) {
                /**
                 * 账套所有人
                 * 1.appletOfUse 判断小程序商城是否开启功能，一键生成商城按钮是否显示
                 * 2.小程序商城网址配置成功弹窗、到期续费提醒弹窗
                 */
                if (item.isLeader == 1) {
                  // 1
                  that.showGenerateMall = item.appletOfUse ? false : true
                  // 2
                  if (item.appletOfUse) {
                    that.getAppletInfo(item)
                  }
                }
                // 原来的其他功能
                Vue.ls.set(ACCOUNT_BOOK, item)
                that.currentAccount = item.id
                that.getBookDetail(item.id)
                that.getIsLeader()
                that.getAccountExpired(item.id)
                that.getOpenAccountFlag()
                that.getSystemInfo(item.id)
              }
            })
          }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取当前账套详情
    getBookDetail(id) {
      getAction('/accountbookinfo/xghAccountBook/queryById', { id }).then((res) => {
        // console.log(res);
        if (res.success) {
          if (res.result.buyType) {
            this.buyTitle = '续费'
          } else {
            this.buyTitle = '购买'
          }
        } else {
          this.buyTitle = '购买'
        }
      })
    },
    // 获取当前账套是否过期
    getAccountExpired(id) {
      getAction('/accountbookusing/xghAccountBookUserUsing/getIfAccountBookExpired', {
        xghAccountBookId: id,
      }).then((res) => {
        if (res.success && res.result) {
          // 到期
          Vue.ls.set('account-no-money', true)
          this.$router.push({ name: 'setting-buy-accountBookPay' }).catch((err) => {})
        } else {
          // 没到期
          Vue.ls.set('account-no-money', false)
        }
      })
    },

    // 获取当前账套ID
    getCurrentAccount() {
      const that = this
      let userInfo = Vue.ls.get(USER_INFO)
      let accountInfo = Vue.ls.get(ACCOUNT_BOOK) || {}
      getAction(`accountbookusing/xghAccountBookUserUsing/getByUserId/${userInfo.id}`).then((res) => {
        if (res.code == 200) {
          if (accountInfo.id != res.result.accountBookId) {
            // 可能APP上切换账套了，直接强退
            setToken('')
            this.logout()
          }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },

    // 判断域名是否配置成功、续费弹窗是否展示
    getAppletInfo(item) {
      let userInfo = Vue.ls.get(USER_INFO)
      getAction('/xghRequestForm/xghRequestForm/getAppletInfo', {
        accountBookId: item.id,
        phone: userInfo.username,
        appletOfUse: item.appletOfUse,
      }).then((res) => {
        if (res.success) {
          if (res.result.successRegister) {
            // 配置成功商城提醒
            this.$refs.configSuccess.dialogVisible = true
          } else if (res.result.renew <= 3) {
            // 到期续费提醒
            this.$refs.renewalFee.days = res.result.renew
            this.$refs.renewalFee.dialogVisible = true
            this.setRenewInfo(item, userInfo)
          }
        }
      })
    },
    // 记录续费弹窗今天弹出过
    setRenewInfo(item, userInfo) {
      getAction('/xghRequestForm/xghRequestForm/setRenewInfo', {
        accountBookId: item.id,
        phone: userInfo.username,
      })
    },

    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    changePwd() {
      this.$refs.changePwd.dialogVisible = true
    },
    toHome() {
      // 账套过期不允许进入其他页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      if (this.openAccountValue === 3) {
        this.$router.push(`/dashboard/analysis`).catch((err) => {})
      } else {
        this.$elMessage.warning('未开账不能操作!')
      }
    },
    systemSetting() {
      this.$refs.settingDrawer.showDrawer()
    },
    // async logout() {
    //   await this.$store.dispatch('user/logout')
    //   this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    // },
    logout() {
      // setToken('')
      // this.$router.push(`/user/Login`)

      store.dispatch('Logout').then(() => {
        this.$router.push(`/user/Login`).catch((err) => {})
      })
    },
    clickBuy() {
      // 账套过期不允许进入页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      // 暂未对接，页面跳转先注掉
      // return
      this.$router.push({
        path: '/setting/ManagementZT/ManagementZT',
        query: {
          editBook: true,
        },
      })
    },
    clickNavigation() {
      // 账套过期不允许进入页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      let rect = this.$refs.guideItem.getBoundingClientRect()
      // console.log('点击新手导航')
      let params = {
        rect,
        step: 1,
      }
      this.$EventBus.$emit('showNoviceGuide', params)
    },
    clickGenerationMall() {
      this.$router.push({ path: '/shopManage/buyShop' })
    },
    clickShare() {
      this.$refs.invitationRef.dialogVisible = true
      // console.log('点击分享')
    },
    clickGenerateShortcut() {
      this.$refs.shortcutRef.dialogVisible = true
      // console.log('点击生成桌面快捷方式')
    },
    shortcutConfirm() {
      // let url = window._CONFIG['domianURL']
      // if (url && url.indexOf('api')) {
      //   url = url.replace('api', '')
      // }
      // this.saveToDesktop('象过河云进销存', '.url', url)
      this.saveToDesktop('象过河云进销存', '.url', 'https://yun.xiangguohe.cn/')
    },
    saveToDesktop(name, doc, url) {
      var fileName = name + doc
      var data = '[InternetShortcut]' + '\n' + 'URL=' + url
      var explorer = navigator.userAgent.toLowerCase()
      if (explorer.indexOf('trident') > 0) {
        //IE 5+
        var wss = new ActiveXObject('WScript.Shell')
        var desktopUrl = wss.SpecialFolders('Desktop')
        var fso = new ActiveXObject('Scripting.FileSystemObject')
        var tf = fso.CreateTextFile(desktopUrl + '\\' + fileName, true)
        tf.Write(data)
        tf.Close()
      } else {
        //fireFox chrome
        var urlObj = window.URL || window.webkitURL || window
        var blob = new Blob([data])
        var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        link.href = urlObj.createObjectURL(blob)
        link.download = fileName
        saveClick(link)
      }

      function saveClick(obj) {
        var e = document.createEvent('MouseEvents')
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        obj.dispatchEvent(e)
      }
    },
    clickContactUs() {
      this.$router.push({
        path: '/home/contactUs',
      })
    },
    clickAppDownload() {
      // console.log('点击APP下载')
    },
    clickOnlineService() {
      // console.log('点击在线客服')
    },
    clickHelpCenter() {
      this.$router.push({
        path: '/home/helpCenter',
      })
    },
    showMessage() {
      this.$router.push({
        path: 'newsNotice',
      })
      // console.log('点击消息')
    },
    accountOption() {
      // console.log('点击开帐操作')
    },
    showUserInfo() {
      // console.log('点击显示用户信息')
    },
    // 切换语言
    selectLanguage() {
      switch (this.currentLan) {
        case '1':
          this.$i18n.locale = this.langcn
          localStorage.lang = this.langcn
          break
        case '2':
          this.$i18n.locale = this.langen
          localStorage.lang = this.langen
          break
        case '3':
          this.$i18n.locale = this.langtw
          localStorage.lang = this.langtw
          break

        default:
          break
      }
      // console.log(this.$i18n.messages.en.message.hello)
    },
    /**
     * 切换账套
     */
    /**
     * 切换账套
     */
    selectAccount(e) {
      
      getAction('/accountbookinfo/xghAccountBook/getVersion', {
        id: e,
      }).then((res) => {
        console.log(res);
        let result = res.result || '专业版'
        Vue.ls.set('accountVersion', result)
      })

      this.optionsAccount.forEach((item) => {
        if (item.id == e) {
          if (getTimeYMD() < item.periodOfUse) {
            // 账套还没有到期
            Vue.ls.set('account-no-money', false)
            this.editAccountInfo(item)
          } else {
            // 只有管理员可以续费
            if (item.isLeader == 1) {
              // 账套到期
              Vue.ls.set('account-no-money', true)
              this.editAccountInfo(item)
            } else {
              this.$elMessage.warning('账套已到期，请联系管理员续费!')
            }
          }
        }
      })
    },
    // 更新账套
    editAccountInfo(item) {
      const that = this
      let number = 20
      const loading = that.$loading({
        lock: true,
        text: '账套切换中，请耐心等待，预计剩余20s...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      })
      if (that.timer) {
        clearInterval(that.timer)
      }
      that.timer = setInterval(() => {
        setTimeout(() => {
          if (number > 0) {
            number--
            loading.setText(`账套切换中，请耐心等待，预计剩余${number}s...`)
          } else {
            clearInterval(that.timer)
            loading.close()
          }
        }, 0)
      }, 1000)
      let userInfo = Vue.ls.get(USER_INFO)
      postAction('accountbookusing/xghAccountBookUserUsing/updateByUserId', {
        accountBookId: item.id,
        userId: userInfo.id,
      }).then((res) => {
        if (res.code == 200) {
          Vue.ls.set(ACCOUNT_BOOK, item)
          that.getIsLeader()
          that.getAccountList()
          that.routeReload()
          that.getSystemInfo(item.id)
          // 切换账套需要关闭其他标签
          this.closeAll()
          that.getOpenAccountFlag()
          loading.close()
          // that.getUserPerms(item.id, userInfo.id)
          let userPerms = res.result || {}
          that.$lcStorage.set('userPermissions', userPerms)
          this.$EventBus.$emit('changeAccountBook')
        }
      })
    },
    // 获取期初信息
    getOpenAccountFlag() {
      getAction('/openAccount/getOpenAccountType', {}).then((res) => {
        if (res.code === 200) {
          if (!res.result) {
            this.toSystemConfiguration()
            this.$store.commit('SET_OPEN_ACCOUNT_VALUE', 0)
          } else {
            this.$store.commit('SET_OPEN_ACCOUNT_VALUE', Number(res.result.value))
            if (res.result.value != 3) {
              this.toSystemConfiguration()
            } else {
              // 账套过期，跳转续费页面
              if (Vue.ls.get('account-no-money')) {
                // console.log('账套过期，跳转续费页面')
                this.$router.push({ name: 'setting-buy-accountBookPay' }).catch((err) => {})
              }
            }
          }
        }
      })
    },
    toSystemConfiguration() {
      // 账套没有过期，跳转到开账页面，过期只能跳转续费页面
      if (!Vue.ls.get('account-no-money')) {
        this.$router.push({ name: 'business-SystemConfiguration' }).catch((err) => {})
      } else {
        this.$router.push({ name: 'setting-buy-accountBookPay' }).catch((err) => {})
      }
    },
    // 获取用户权限
    async getUserPerms() {
      let userInfo = Vue.ls.get(USER_INFO)
      const res = await getAction('/accountbookusing/xghAccountBookUserUsing/getUserPerms', {
        userId: userInfo.id,
      })
      if (res.code === 200) {
        // console.log(res);
        let userPerms = res.result || {}
        this.$lcStorage.set('userPermissions', userPerms)
      }
    },
    /**
     * 获取系统配置参数
     */
    async getSystemInfo(id) {
      const res = await getAction('/sysConfig/systemConfig/queryByXghAccountBookId', {
        xghAccountBookId: id,
      })
      if (res.code === 200) {
        let list = res.result.sysConfigList
        if (list.length > 0) {
          this.$lcStorage.set('sysConfigList', list)
          let basicInfoObj = {}
          list.forEach((el) => {
            this.$set(basicInfoObj, el.code, el)
          })
          this.handleCountPriceData(
            basicInfoObj,
            (basicInfoObj.unit_price && basicInfoObj.unit_price.value) || '0',
            (basicInfoObj.num && basicInfoObj.num.value) || '0',
            (basicInfoObj.price && basicInfoObj.price.value) || '0'
          )
          // this.handleCountPriceData(list[34].value, list[35].value, list[36].value)
        }
      }
    },
    // 处理位数
    handleCountPriceData(basicInfoObj, priceDecimal, count, moneyDecimal) {
      // 对数量、金额、价格参数进行处理，得到小数点后位数，是否需要格式化价格、金额，遇千加','
      // 1、单价
      if (priceDecimal == '0') {
        priceDecimal = 0
      } else if (priceDecimal == '0.00') {
        priceDecimal = 2
      } else if (priceDecimal == '0.0000') {
        priceDecimal = 4
      } else if (priceDecimal == '0.00000000') {
        priceDecimal = 8
      } else if (priceDecimal == '0.000000000000') {
        priceDecimal = 12
      } else {
        priceDecimal = 0
      }
      // 2、金额
      if (moneyDecimal == '0') {
        moneyDecimal = 0
      } else if (moneyDecimal == '0.00') {
        moneyDecimal = 2
      } else if (moneyDecimal == '0.0000') {
        moneyDecimal = 4
      } else if (moneyDecimal == '0.00000000') {
        moneyDecimal = 8
      } else if (moneyDecimal == '0.000000000000') {
        moneyDecimal = 12
      } else {
        moneyDecimal = 0
      }
      // 3、数量
      if (count == '0') {
        count = 0
      } else if (count == '0.00') {
        count = 2
      } else if (count == '0.0000') {
        count = 4
      } else if (count == '0.00000000') {
        count = 8
      } else {
        count = 0
      }
      // 将结果缓存起来
      this.$lcStorage.set('toFixedList', {
        unitPrice: priceDecimal,
        number: count,
        allPrice: moneyDecimal,
        formatUnitPrice: basicInfoObj.separator && basicInfoObj.separator.value == '1',
        formatAllPrice: basicInfoObj.separator && basicInfoObj.separator.value == '1',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 60px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .head-view {
    width: 100%;
    height: 60px;
    background: #006fff;
    display: flex;
    // align-content: center;
    align-items: center;
  }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }

  .li-option {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  ::v-deep .el-input--mini .el-input__inner {
    height: 28px;
    line-height: 28px;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
  }

  ::v-deep .el-input--large .el-input__inner {
    height: 28px;
    line-height: 28px;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
  }

  ::v-deep .el-select .el-input .el-select__caret {
    color: #fff;
    display: flex;
    align-items: center;
  }

  // 账套名称
  .account-name {
    width: 230px;
    margin-left: 19px;
  }

  .inputStyle {
    width: 98px;
  }
}

.btn-buy {
  width: 60px;
  min-width: 60px;
  height: 30px;
  background: linear-gradient(180deg, #ffb406, #ff8800);
  display: flex;
  justify-content: center;
  align-content: center;
  vertical-align: middle;
  border-radius: 5px;
  margin-left: 0.375023rem;
  cursor: pointer;

  .buy-text {
    color: #ffffff;
    // font-size: 0.262516rem;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.novice-navigation {
  border: 1px solid #fff;
  opacity: 1;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .navigation-text {
    // font-size: 0.262516rem;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #fff;
    opacity: 1;
  }
}

.first {
  margin-left: 20px;
  padding: 5px 6px;
  width: 80px;
  min-width: 80px;
}

.second {
  margin-left: 18px;
  padding: 5px 7px;
  flex-shrink: 0;
}

.share {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;

  img {
    width: 28px;
    height: 28px;
    opacity: 1;
  }
}

.contact-us {
  min-width: 68px;
  height: 17px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 17px;
  color: #fff;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.appDownload {
  min-width: 68px;
  height: 17px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 17px;
  color: #fff;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.message {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  position: relative;

  img {
    width: 21px;
    height: 20px;
  }

  .redpot {
    position: absolute;
    top: 3px;
    left: 12px;
    width: 5px;
    height: 5px;
    background: #ff0000;
    border-radius: 50%;
    opacity: 1;
  }
}

.userinfo {
  display: flex;
  align-items: center;
  margin-left: 20px;
  flex-shrink: 0;

  span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 20px;
    color: #fff;
    opacity: 1;
    flex-shrink: 0;
  }

  img {
    margin-left: 14px;
    margin-right: 20px;
    width: 10px;
    height: 10px;
  }
}

.qrcode-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;

  .qrcode-item {
    text-align: center;

    img {
      width: 120px;
      height: 120px;
      margin-bottom: 10px;
    }

    p {
      margin: 0;
      color: #333;
      font-size: 14px;
    }
  }
}
</style>
